<template>
  <view class="content">
    <view class="top">
      <view class="title">
        三甲医院
      </view>
      <view class="search">
        <uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入医院名称" clearButton="auto" cancelButton="none"
          @confirm="searchHospital" @blur="searchHospital" @clear="searchHospital"	/>
      </view>
    </view>
    
     <view class="hospital-list">
       <view @click="gotoDetail(hospital.id)" class="hospital-item" v-for="(hospital, index) in hospitalList" :key="hospital.id" >
         <image class="hospital-image" :src="hospital.icon" mode="aspectFill"></image>
         <view class="hospital-info">
           <text class="hospital-name">{{ hospital.name }}</text>
           <view class="hospital-tags">
             <text class="hospital-tag" v-for="(tag, tagIndex) in hospital.label.split(',')"
               :key="tagIndex">{{ tag }}</text>
           </view>
           <view class="highlight-department">
             <text class="department-title">重点科室：</text>
             <text class="department-content">{{ hospital.department }}</text>
           </view>
           <view class="location">
             <uni-icons size="20" type="location-filled"></uni-icons>
             <text class="hospital-location">{{ hospital.address }}</text>
           </view>
         </view>
       </view>
     </view>
   
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    uselocation
  } from '@/stores/location.js';
  import {
    ref,
    watch,
    onMounted
  } from 'vue';
  const locationInfo=uselocation().locationInfo
  const hospitalList = ref([])
  onMounted(()=>{
     getHospitaol(param)
  })
  let param = {
    cityCode: locationInfo.id,
    pageNo: 1,
    pageSize: 100
  }
  //当cityCode有值时发出请求,直接在onmout方法中请求，citycode值还没有获取到，通过观察者模式发现值变化时发生请求
  watch(() => locationInfo.id, (newCode, oldCode) => {  
    param.cityCode=newCode
     getHospitaol(param)
  } );

  function searchHospital(e) {
    let param = {
      cityCode: locationInfo.id,
      name: e.value,
      pageNo: 1,
      pageSize: 100
    }
    getHospitaol(param)
  }

  async function getHospitaol(param) {
    //获取
    const result = await http.getRequest("/peizhen/hospital/page", param)
    if (result.code == 0) {
      hospitalList.value = result.data.list
    } else {
      uni.showToast({
        title: '获取医院失败',
        icon: 'error',
        duration: 1000
      })
    }
  }
  function gotoDetail(id){
    uni.navigateTo({
      url:`/pages/index/hospital/hospital-detail/hospital-detail?id=${id}`
    })
  }
</script>

<style lang="scss" scoped>
  .top {
    background-color: #fff;
    display: flex;
    flex: 1;

    .title {
      margin-left: 24rpx;
      width: 500rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 40rpx;
      font-family: "Tahoma";
      color: #46464c;
    }
  }


  .search {
    width: 500rpx;
    height: 60rpx;
  }

  .hospital-list {
    display: flex;
    flex-direction: column;
  }

  .hospital-item {
    display: flex;
    align-items: start;
    margin-bottom: 25rpx;
    background-color: #ffffff;
    padding: 17rpx;
    border-radius: 8rpx;
    box-shadow: 0 4rpx 7rpx rgba(0, 0, 0, 0.1);
  }

  .hospital-image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 8rpx;
    margin-right: 25rpx;
  }

  .hospital-info {
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  .hospital-name {
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 8rpx;
    font-weight: bold;
    /* 添加字体加粗 */
  }

  .hospital-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8rpx;

  }

  .hospital-tag {
    font-size: 24rpx;
    color: #ffffff;
    margin-right: 8rpx;
    margin-bottom: 8rpx;
    padding: 4rpx 8rpx;
    background-color: #42b983;
    border-radius: 5rpx;
  }

  .highlight-department {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    margin-top: 8rpx;
  }

  .department-title {
    margin-right: 17rpx;
    /* 增加与内容的间距 */
    font-weight: bold;
    /* 加粗标题 */
    color: #FC6B05;
  
  }

  .department-content {
    color: #666;
    /* 灰色内容，与标题形成对比 */
    font-weight: normal;
    /* 确保内容不是加粗的 */
    white-space: nowrap;
    /* 如果科室名称很长，可以选择不换行或添加省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 文本溢出时显示省略号 */

  }

  .location {
    margin-top: 8rpx;
  }

  .hospital-location {

    font-size: 24rpx;
    color: #999999;
  }
</style>